<template>
  <section class="header con1"
           :style="'height:'+heightNum+'px;'">
    <div class="shadow"
         v-if="bannerShow!=0"
         :style="'height:'+heightNum+'px;'"></div>
    <div class="shadow2"
         v-if="bannerShow==0"
         :style="'height:'+heightNum+'px;'"></div>
    <div class="top">
      <img src="./../image/pic9.png"
           alt=""
           srcset=""
           class="logo1">
      <ul class="ul1">
        <a href="/">
          <li>Home</li>
        </a>
        <li @click="tourls(1)"
            class="cursor">
          About us</li>
        <li @click="tourls(2)"
            class="cursor">News</li>
        <a href="/#/front/sitemap">
          <li>Website map</li>
        </a>
      </ul>
      <div class="searchBox">
        <input type="text"
               placeholder="Search"
               v-model="text">
        <img src="./../image/pic17.png"
             alt=""
             srcset=""
             class="pointer"
             @click="toSearch">
      </div>
      <div class="lang"
           style="z-index:100">
        <span class="pointer"
              :class="{'act':language=='en'}"
              @click="lang('en')"> En</span>
        <span class="line"> </span>
        <span class="pointer"
              :class="{'act':language=='ch'}"
              @click="lang('ch')">中文 </span>
      </div>

    </div>
    <el-menu :default-active="activeIndex"
             style="z-index:10000"
             mode="horizontal"
             @select="handleSelect"
             class="elmenu menu1">
      <section v-for="(item,indexs) in list"
               class="lefts"
               :key="indexs">
        <template v-if="!item.children">
          <el-menu-item :index="item.id.toString()"
                        @click="navigateTo(item,'','',item.id)"><span>{{item.menuName}}</span></el-menu-item>
        </template>
        <template v-else>
          <el-submenu :index="item.id.toString()">
            <template slot="title">{{item.menuName}}</template>
            <div v-for="(itemd,dt) in item.children"
                 :key="dt">
              <div v-if="!itemd.children">
                <el-menu-item :index="itemd.id.toString()"
                              @click="navigateTo(itemd,item.menuName,'',item.id)">{{itemd.menuName}}</el-menu-item>
              </div>
              <div v-else>

                <el-submenu :index="itemd.id.toString()">
                  <template slot="title"
                            @click="navigateTo(itemd,item.menuName)">{{itemd.menuName}}</template>
                  <el-menu-item v-for="(itemdd,dtt) in itemd.children"
                                :key="dtt"
                                :index="itemdd.id.toString()"
                                @click="navigateTo(itemdd,itemd.menuName,item.menuName,item.id)">{{itemdd.menuName}}</el-menu-item>
                </el-submenu>
              </div>
            </div>
          </el-submenu>
        </template>

      </section>

    </el-menu>
    <div class="banner"
         v-if="bannerShow!=0"
         style="height:100%">
      <div class="imgbox"
           style="height:100%">
        <div class="img"
             v-for="(item,index) in bannerList"
             :key="index"
             @click="imgUrl(bannerList[current])"
             :class="{'im':current===index,'cursor':!!bannerList[current].linkUrl}"
             width="100%"
             :style="{backgroundImage: 'url(' + item.url + ')', backgroundSize:'corver', backgroundRepeat: 'no-repeat',backgroundPosition:'center',height:'100%',width:'100%'}">

        </div>
        <!-- <img class="img"
             v-for="(item,index) in bannerList"
             :key="index"
             @click="imgUrl(bannerList[current])"
             :class="{'im':current===index,'cursor':!!bannerList[current].linkUrl}"
             :src="item.url"
             width="100%"
             style="height:100%"/> -->

      </div>
    </div>
    <div class="prefn1"
         v-if="bannerShow!=0&&bannerList&&bannerList.length>1"
         @click="prefn">

    </div>
    <div class="nextfn1"
         v-if="bannerShow!=0&&bannerList&&bannerList.length>1"
         @click="nextfn">

    </div>
    <img class="change pre"
         v-if="bannerShow!=0&&bannerList&&bannerList.length>1"
         @click="prefn"
         src="./../image/pic7.png">
    <img class="change next"
         v-if="bannerShow!=0&&bannerList&&bannerList.length>1"
         @click="nextfn"
         src="./../image/pic10.png">
  </section>

</template>

<script>

import { mapState } from "vuex";
import {  Button, Select, Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,} from 'element-ui'
export default {
  name: "enHeaders",
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      autoplay: null,
      current: 0,
      breadsShowData: [],
      list: [
        { "id": 0, children: [] }
      ],
      text: "",
      language: localStorage.getItem("lang") || 'ch',
      heightNum: 560,
      clientWidth: 1902
    };
  },
  props: ["bannerList", "bannerShow"],

  watch: {
    list (v, vv) {
    },
    clientWidth (v, vv) {
      if (this.bannerShow == 0) {
        this.heightNum = 180
      } else {
        if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
          this.heightNum = 560
        } else {
          this.heightNum = document.body.clientHeight
        }
      }
    }

  },
  mounted () {
    if (this.bannerShow == 0) {
      this.heightNum = 180
    } else {
      let that = this;
      this.clientWidth = document.body.clientWidth
      window.onresize = () => {
        that.clientWidth = document.body.clientWidth
        if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) {
          that.heightNum = 560
        } else {
          that.heightNum = document.body.clientHeight
        }
      }
    }

  },
  computed: mapState({
    stateObject: state => state.stateObject
  }),
  components: {
    elMenu: Menu,
    elSubmenu: Submenu,
    elMenuItem: MenuItem,
    elMenuItemGroup: MenuItemGroup,
  },
  created () {
    let self = this
    Driver.proxy(
      "api",
      {
        apiPath: apiConfig.member.getMenuTree,
        mode: "post",
        data: {
          pid: 0
        }
      },
      function (suc) {
        self.breadsShowData = suc.data
        let arr = []
        let tmp = [1, 2, 21, 22]
        suc.data.forEach((v, i) => {
          if (!tmp.includes(v.id)) {
            arr.push(v)
          }
        })
        // let mock = { "userName": null, "lang": "ch", "page": 1, "pageSize": 10, "id": 10000, "menuName": "RLB Exchange Rates", "url": "", "pid": 1, "templateId": 3, "entityId": 5, "canChild": false, "canDelete": false, "sort": 2, "createTime": "2019-09-01T03:03:23.000+0000", "updateTime": "2019-09-01T03:03:23.000+0000", "children": null }
        // arr.push(mock)
        self.list = arr;
      },
      function (err) {

      }
    );
    setTimeout(() => {
      if (this.bannerList && this.bannerList.length > 1) {
        this.autoplay = setInterval(() => {
          let tempindex = this.current + 1;
          this.current = tempindex > (this.bannerList.length - 1) ? 0 : tempindex;
        }, 5000)
      }
    }, 2000);

  },
  methods: {
    imgUrl (v) {
      if (!!v.linkUrl) {
        window.location.href = v.linkUrl
      }
    },
    tourls (v) {
      let obj = {
        myvuex: {
          books: "",
        },
      };

      let url = ""
      let str = ""
      let storage = localStorage.getItem('lang')
      if (v == 1) {
        url = "/front/commons?pid=21&ids=31&templateId=0&entityId=74"
        str = `${this.breadsShowData[0].menuName},${this.breadsShowData[0].children[0].menuName},${this.breadsShowData[0].children[0].children[0].menuName}`
      } else {
        str = `${this.breadsShowData[1].menuName},${this.breadsShowData[1].children[3].menuName}`
        url = "/front/commons?pid=22&ids=40&templateId=3&entityId=24"
      }
      obj.myvuex.books = str
      console.log(str);
      sessionStorage.setItem("books", obj.myvuex.books)
      this.$store.commit('stateFn', obj);
      this.tourl(url);
    },
    lang (v) {
      if (v == "en") {
        return false
      }
      this.stateObject.myvuex.books = "首页"
      localStorage.setItem("lang", v);
      this.language = v;
      window.location.href = "/"
    },
    toSearch () {
      this.tourl("/front/search?searchText=" + this.text);
    },
    handleSelect () {

    },
    nextfn () {
      if (this.bannerList && this.bannerList.length) {
        let tempindex = this.current + 1;
        this.current = tempindex > (this.bannerList.length - 1) ? 0 : tempindex;
      }

    },
    prefn () {
      if (this.bannerList && this.bannerList.length) {
        let tempindex = this.current - 1;
        this.current = tempindex < 0 ? (this.bannerList.length - 1) : tempindex;
      }

    },
    navigateTo (item, sectit = '', firtit = '', pid = "") {
      if (item.menuName == "RLB Exchange Rates") {
        this.tourl("/front/article?articleId=10000")
      } else {
        if (item.children) {
          return
        } else {
          let firtab = firtit != '' ? (firtit + ',') : '';
          let sectab = sectit != '' ? (sectit + ',') : '';
          let obj = {
            myvuex: {
              books: firtab + sectab + item.menuName,
              menuid: item.id
            },
          };
          sessionStorage.setItem("books", obj.myvuex.books)
          this.$store.commit('stateFn', obj);
          this.$router.push({ path: '/front/commons', query: { "pid": pid, "ids": item.id, "templateId": item.templateId, "entityId": item.entityId, "time": new Date().getTime() } });
        }
      }

    },
  }
};
</script>

<style lang="scss" >
.el-menu--horizontal .el-menu .el-menu-item,
.el-menu--horizontal .el-menu .el-submenu__title {
  background: rgba(133, 12, 12, 0.3) !important;
}
.el-menu--popup-bottom-start
  .el-submenu.is-opened
  > .el-submenu__title
  .el-submenu__icon-arrow {
  color: #fff !important;
}
.is-opened > .el-submenu__title > i {
  right: 17px;
  color: white !important;
}
.el-menu--popup-bottom-start {
  background: rgba(255, 255, 255, 0.1) !important;
}
.el-menu--popup-bottom-start > div > div {
  height: 50px;
  line-height: 50px !important;
  text-align: center;
}
.el-menu--popup-bottom-start > div > div > li > div {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  min-height: 50px !important;
  line-height: 50px !important;
  font-size: 15px;
  text-align: center;
  i {
    color: white !important;
  }
}

.el-menu--popup-bottom-start > div > div > li > div > ul > li {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  height: 51px !important;
  line-height: 51px !important;
  font-size: 15px;
  margin-left: 3px;
  border-bottom: 1px solid white !important;
  text-align: center;
}
.el-menu--popup-bottom-start > div > div > li {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  height: 50px !important;
  line-height: 50px !important;
}
.el-menu--popup-bottom-start > div {
  border-bottom: 1px solid white;
  height: 50px !important;
  line-height: 50px !important;
}
.el-menu-item * {
  vertical-align: unset !important;
}

.menu1 > section > .el-submenu > div > i {
  color: white !important;
  right: 0px;
  font-size: 16px;
}
.con1 {
  .el-submenu__title {
    // background: none;
  }
  .el-submenu__title:hover {
    background: none !important;
  }

  .el-menu--horizontal .el-menu .el-menu-item {
    color: white !important;
  }
  .el-submenu__title,
  .el-menu-item {
    color: white !important;
    padding: 0 20px 0 0;
    font-size: 21px;
  }
  @media screen and (max-width: 1400px) {
    .el-submenu__title,
    .el-menu-item,
    .el-menu-item {
      color: white !important;
      padding: 0 20px 0 0;
      font-size: 16px !important;
    }
  }
  .el-menu-item:focus,
  .el-menu-item:hover {
    background: none;
  }

  .el-submenu {
    color: white !important;
  }
  .con1 .el-submenu__title,
  .con1 .el-menu-item {
    line-height: 50px;
  }
}
.el-menu--popup {
  padding: 0 !important;
}
.el-menu--popup-right-start {
  margin-left: 0;
  margin-right: 0;
  background: rgba(255, 255, 255, 0.1) !important;
}
.el-menu--popup-bottom-start {
  .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
    color: white !important;
    position: absolute;
    right: 20px;
  }
}
.elmenu {
  height: 50px !important;
  background: none !important;
  margin: 0 auto;
}
</style>
<style lang="scss" scoped>
.pointer {
  cursor: pointer;
}
.lefts {
  float: left;
  margin-right: 50px;
  z-index: 300;
}
.con1 {
  min-width: 1300px;
}
.next,
.pre {
  z-index: 10;
  width: 20px;
  height: 40px;
  cursor: pointer;
}
.banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.el-submenu__title {
  // background-color: none !important;
}
.el-menu--horizontal > ul {
  // background: rgba(255, 255, 255, 0.1) !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border: 0;
  color: none;
}
.elmenu {
  font-size: 18px;
  border: 0 !important;
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
// .menu {
//   width: 1125px;
//   margin: 0 auto;
//   margin-top: 20px;
// }
.logo1 {
  width: 22.08%;
  z-index: 10;
}
.header {
  min-width: 1300px;
  position: relative;
}
.header500 {
  height: 560px;

  position: relative;
}
.header300 {
  height: 180px;
  background: #850c0c;
  position: relative;
}
.top {
  margin-top: 15px;
  padding: 0 5%;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 10;
}
.cursor {
  cursor: pointer;
}
.log1 {
  width: 424px;
  height: 50px;
}
.ul1 {
  width: 27.5%;
  height: 28px;
  margin: 0 12.86% 0 7.76%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  z-index: 10;
  li {
    font-size: 18px;
    float: left;
    color: white;
  }
}
.searchBox {
  width: 18.62%;
  height: 24px;
  margin: 0 3.17% 0 0;
  border-bottom: 1px solid #d1c0a5;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 10;
  input {
    width: 86.66%;
    border: none;
    height: 100%;
    background-color: transparent;
    color: #d1c0a5;
  }
  input::-webkit-input-placeholder {
    color: #d1c0a5;
  }
  input::-moz-input-placeholder {
    color: #d1c0a5;
  }
  input::-ms-input-placeholder {
    color: #d1c0a5;
  }
  img {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 0;
    bottom: 1px;
  }
}
.cursor {
  cursor: pointer;
}
.lang {
  width: 80px;
  height: 20px;
  color: #d1c0a5;
  line-height: 1;
  text-align: center;
  position: relative;
  display: flex;
  justify-content: space-between;
  .act {
    color: #fff;
  }
  .line {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 10px;
    transform: translate(-50%, -50%);
    width: 1px;
    background: #d1c0a5;
    margin-left: -5px;
  }
}
.banner {
  width: 100%;
  height: 560px;
  background-color: aqua;
  overflow: hidden;
  // cursor: pointer;
  z-index: 1;
}
.imgbox {
  width: 100%;
  height: 560px;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}
.img {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  transition: opacity 1s linear;
  opacity: 0;
  filter: alpha(opacity=0);
}
.im {
  opacity: 100;
  filter: alpha(opacity=100);
}
.change {
  display: block;
  position: absolute;
  z-index: 20;
  // opacity: 0.4;
  transition: 0.4s;
  top: 50%;
  margin-top: -50px;
}
.change:hover {
  opacity: 1;
}
.pre {
  left: 9%;
}
.next {
  right: 9%;
}
.cirbox {
  width: 88px;
  position: absolute;
  bottom: 15px;
  z-index: 10;
  left: 50%;
  margin-left: -44px;
  cursor: pointer;
}
.cir {
  width: 12px;
  height: 12px;
  background-color: white;
  // opacity: 0.4;
  float: left;
  border-radius: 6px;
  margin: 0 5px 0 5px;
  cursor: pointer;
}
.cir:hover {
  background-color: cyan;
  transition: 0.8s;
}
.cr {
  opacity: 1;
}
.cr:hover {
  // background-color: white;
}
.shadow,
.shadow2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(118, 0, 0, 1) 0%,
    rgba(0, 0, 0, -0.36) 35%
  );
  z-index: 2;
  pointer-events: none;
}
.shadow2 {
  background: #850c0c;
}

#p1 {
  position: absolute;
  font-size: 55px;
  color: white;
  top: 50%;
  left: 57%;
  z-index: 100;
}
#p2 {
  position: absolute;
  font-size: 30px;
  color: white;
  top: 80%;
  left: 74%;
  z-index: 100;
}
.prefn1,
.nextfn1 {
  width: 313px;
  height: 470px;
  // background: red;
  position: absolute;
  top: 90px;
  z-index: 120;
  cursor: pointer;
}
.prefn1 {
  left: 4px;
}
.nextfn1 {
  right: 0px;
}
</style>